<template>
  <div class="delivery-check-table">
    <a-table
      class="table"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      :scroll="{x: 1600, y: 600}"
      size="small"
    >
      <span slot="id" slot-scope="text" style="margin-left: 10px;">
        {{text}}
      </span>
      <span slot="amount" slot-scope="text">
        {{divide3Float3Fixed(text)}}
      </span>
      <span slot="price" slot-scope="text">
        {{divide3Float3Fixed(text)}}
      </span>

      <template slot="operation" slot-scope="text, record">
        <a-button size="small" @click="modifyOrder(record)" class="operation">
          修改
        </a-button>
        <a-popconfirm
            title="确认从该送货单移除该订单？"
            ok-text="确认移除"
            cancel-text="取消"
            @confirm="removeOrder(record)"
          >
            <a-button type="danger" size="small">
              移除
            </a-button>
          </a-popconfirm>
      </template>

    </a-table>
    <div class="statistics">
      <h3 class="total-amount">
        总金额：<span>{{divide3Float3Fixed(totalAmount)}}</span>
      </h3>
      <h3 class="selected-length">
        订单量：<span>{{data.length}}</span>
      </h3>
    </div>
  </div>
</template>

<script>
import {
  deliveryCheckColumns
} from './init/tableInit.js';

import {
  divide3Float3Fixed
} from '@/utils/NumberChange.js'

import {
  deliveryRemoveOrderReq
} from '@/requests/deliveryRequests.js';

export default {
  name: "DeliveryCheckTable",
  props: {
    orders: {
      type: Array,
      default: () => []
    },
    totalAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      data: [],
      columns: [],
    };
  },
  computed: {

  },
  mounted() {
    this.columns = deliveryCheckColumns;
    this.data = this.orders;
  },
  watch: {
    'orders' () {
      this.data = this.orders;
    }
  },
  methods: {
    divide3Float3Fixed,
    modifyOrder(record) {
      this.$emit('refresh');
      this.$router.push({
        name: 'OrderCheck',
        params: {
          id: record.key
        },
      });
      // 废弃当前页，防止会跳的时候数据不修改。
    },
    removeOrder(record) {
      if (this.$route.params.id !== undefined && this.$route.name == 'DeliveryCheck') {
        const loaded = this.$message.loading('正在移除订单，请勿重复点击移除', 0);
        const id = this.$route.params.id;
        const orderId = record.key;
        const data = {
          orderId
        }
        deliveryRemoveOrderReq(id, data).then((res) => {
          loaded();
          this.$store.commit('updateDeliveriesCache');
          this.$store.commit('updateOrdersCache');

          this.$emit('refresh');
          // 如果成功，刷新当前页

          // 弹框提示移除成功
          this.$notification['success']({
            message: '移除送货单订单',
            description:
              `移除送货单订单成功，对应送货单号 ${id} - 订单号 ${orderId}`,
          });
          // 提示刷新送货单和订单缓存

        }).catch((err) => {
          loaded();
          this.$notification['error']({
            message: '修改订单',
            description:
              `删除订单失败，失败信息 ${err.response.data.message}`,
          });
        });
      }
      
    }
  },
  components: {
    
  },
};
</script>

<style scoped lang="scss">
.delivery-check-table {


}
</style>


<style lang="scss">
.delivery-check-table {

  overflow: auto;
  width: calc(100vw - 300px);
  td.ant-table-row-cell-break-word {
    >.operation {
      margin: 0 5px 0 0;
    }
  }
  >.statistics {
    display: flex;
    justify-content: flex-end;


    margin-top: 20px;
    margin-right: 200px;

    >h3 {
      padding: 10px;
      margin-left: 20px;
      border: 1px solid gray;

      >span {
        color: rgb(45, 87, 59);
      }

      
    }

    >.selected-length {
      color: rgb(41, 138, 133);
    }
  }
  .table {
    * {
      &::-webkit-scrollbar {
        width: 10px;
        height: 17px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: hsla(225, 54%, 48%, 0.3);
        transition: background-color 0.3s;

        &:hover {
          background: #bbb;
        }
      }

      &::-webkit-scrollbar-track {
        background: #ededed;
      }
    }

    .ant-table-header {
      min-width: auto !important;
    }
  }
}
</style>
